<template>
  <div id="organizePage">
    <HeadNav type="inquire" ref="head" :show="1"></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="inquire" sort="tag"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div class="model-bg">
                <div class="section-title">
                  <a-tabs :activeKey="tabKey" @change="callback">
                    <a-tab-pane key="1" tab="标签列表"></a-tab-pane>
                  </a-tabs>
                </div>
              </div>
            </div>
            <div class="model-container">
              <div
                class="model-bg"
                style="padding-bottom: 75px; min-height: 590px"
              >
                <div class="section-title clearfix">
                  <div class="float-left">
                    标签列表
                    <span class="desc" v-if="total > 0"
                      >共{{ total }}个标签</span
                    >
                  </div>
                  <div class="float-right">
                    <!-- <span class="click-font">新增标签</span> -->
                  </div>
                </div>
                <div class="search">
                  <div class="content common">
                    <a-input-search
                      placeholder="搜索标签名称"
                      enter-button="搜索"
                      size="large"
                      v-model="inputVal"
                      @search="onSearch"
                    >
                      <div slot="prefix">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-search" />
                        </svg>
                        <span class="rowLine">|</span>
                      </div>
                    </a-input-search>
                  </div>
                </div>
                <!-- 高级搜素 -->
                <div class="high-search">
                  <div class="option">
                    <span class="title"></span>
                    <span
                      class="high-tab"
                      v-for="(item, index) in sortList"
                      :key="index"
                      :class="{ active: type == item.type }"
                      @click="change(item)"
                      >{{ item.name }}</span
                    >
                  </div>
                </div>
                <!-- 列表 -->
                <div class="table" style="margin-top: 30px">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="90" />
                      <col width="650" />
                      <col width="220" />
                      <col width="100" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>标签ID</td>
                        <td>标签名称</td>
                        <td style="text-align: right">状态</td>
                        <td style="text-align: right">操作</td>
                      </tr>
                    </thead>
                    <tbody v-if="list.length > 0">
                      <tr v-for="(item, index) in list" :key="index">
                        <td>{{ item.id }}</td>
                        <td>
                          <span class="main-font">{{ item.tag_name }}</span>
                        </td>
                        <td style="text-align: right">
                          {{ item.state ? "有效" : "无效" }}
                        </td>
                        <td style="text-align: right">
                          <span class="click-font" @click="openInfo(item)"
                            >编辑</span
                          >
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="4" style="text-align: center">
                          <div style="margin-top: 50px"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- 分页 -->
                <div class="page" v-if="list.length > 0">
                  <a-pagination
                    :show-total="(total) => `共 ${total} 条数据`"
                    :default-current="1"
                    v-model="page"
                    :total="total"
                    :defaultPageSize="pageSize"
                    @change="onShowSizeChange"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑弹层 -->
    <a-modal
      v-model="editModal"
      width="600px"
      :maskClosable="false"
      title="编辑标签"
      on-ok="handleOk"
    >
      <template slot="footer">
        <div class="clearfix">
          <div class="float-rigth">
            <a-button key="back" @click="handleCancel">取消</a-button>
            <a-button key="submit" type="primary" @click="handleOk"
              >保存</a-button
            >
          </div>
        </div>
      </template>
      <div class="popup">
        <div class="option">
          <span class="lable event">*标签名称</span>
          <div class="normal event">
            <a-input
              placeholder="最多15个字"
              v-model="tagInfo.tag_name"
              maxLength="15"
            />
          </div>
        </div>
        <div class="option">
          <span class="lable event">状态</span>
          <div class="normal event">
            <a-radio-group
              name="radioGroup"
              v-model="tagInfo.state"
              size="small"
            >
              <a-radio :value="1">有效</a-radio>
              <a-radio :value="0">无效</a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>
    </a-modal>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/admin/index.scss"></style>
<script>
import { TAG_LISTS, TAG_EDIT } from "../../apis/inquire.js";
export default {
  data() {
    return {
      pagePower: true,
      tabKey: "1",
      type: "all",
      eventType: 0,
      keyWordsType: 0,
      sortType: 0,
      sortList: [
        { name: "全部状态", type: "all" },
        { name: "有效", type: 1 },
        { name: "无效", type: 0 },
      ],
      inputVal: "",
      page: 1,
      pageSize: 20,
      total: 0,
      list: [],
      editModal: false,
      tagInfo: {
        id: 0,
        tag_name: "",
        state: 0,
      },
      isLoading: true,
    };
  },
  mounted() {
    this.getData();
  },
  updated() {},
  methods: {
    // 获取列表数据
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tag_name: this.inputVal,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      if (this.type !== "all") {
        data.state = this.type;
      }
      data.sign = this.$getSign(data);
      let res = await TAG_LISTS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.list = [];
        this.total = res.data.total_count;
        this.list = res.data.list;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 编辑标签
    async editTag() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        tag_name: this.tagInfo.tag_name,
        tag_id: this.tagInfo.id,
        state: this.tagInfo.state,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TAG_EDIT(data);
      if (res.code == 0) {
        this.editModal = false;
        this.isLoading = true;
        this.getData();
        this.$refs.head.globalTip(2, "编辑成功！", 0);
      } else {
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 页签切换
    callback(key) {
      this.tabKey = key;
    },
    // 搜索
    onSearch(value) {
      this.isLoading = true;
      this.page = 1;
      // this.searchVal = value;
      this.getData();
    },
    // 筛选条件切换
    change(item) {
      this.isLoading = true;
      this.type = item.type;
      this.page = 1;
      this.getData();
    },
    // 分页
    onShowSizeChange(page, pageSize) {
      this.isLoading = true;
      this.page = page;
      this.getData();
    },
    // 打开编辑弹窗
    openInfo(item) {
      this.tagInfo = JSON.parse(JSON.stringify(item));
      this.editModal = true;
    },
    handleCancel() {
      this.editModal = false;
    },
    handleOk() {
      if (this.tagInfo.tag_name.length == 0) {
        this.$refs.head.globalTip(1, "标签名称不能为空！", 0);
        return;
      }
      this.editTag();
    },
  },
};
</script>
